@tailwind base;
@tailwind components;
@tailwind utilities;

:root{
    --bg-color:#242424;
    --color:#fff;
    --cont-bg:#181818;
}

#root{
    font-size: 16px;
}

svg[display="none"]{
    display: none;
}
.page{
    background-color: var(--bg-color);
    color: var(--color);
}

.content{
    height: calc(100% - 5rem);
    background-color: var(--cont-bg);
    overflow-y: auto;
}

.btn{
    background-color: #303030;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #414141;
}

.btn:hover{
    border: 1px solid #767575;
}

.btn-disabled{
    background-color: #747474;
    cursor: not-allowed;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
}

.btn-danger{
    background-color: #B71C1C;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
}

.btn-disabled{
    cursor: not-allowed;
    opacity: 0.5;
}

select,input,textarea{
    color: #fff;
    padding: 0.25rem 0.5rem;
    outline: none;
    background-color: #000;
}

label{
    user-select: none;
}

.table thead{
    color: #6b7280;
    font-size: 0.85rem;
}

.table tbody tr:hover{
    background: #26292e;
}

*::-webkit-scrollbar-track{
    background-color: rgba(34, 37, 46, 1);
}

*::-webkit-scrollbar-thumb{
    background-color: rgba(85, 97, 125, 1);
    border-radius: 1rem;
    width: 0.1rem;
}

*::-webkit-scrollbar{
    width: 0.1rem;
    height: 0.1rem;
}